import {
  PageContainer,
  ProCard,
  ProFormSelect,
  ProFormText,
  QueryFilter,
} from '@ant-design/pro-components';
import { useDispatch, useSelector } from '@umijs/max';
import { Table } from 'antd';
import { useEffect } from 'react';

import table from './_table';

const ProjectInterfacePage = () => {
  const dispatch = useDispatch();
  const { list, currentPage, pageSize, total } = useSelector(
    (state) => state.projectInterface,
  );

  const {labelNodes}= useSelector((state)=>state.projectBaseInfo);

  // 初始化分页
  useEffect(() => {
    dispatch({
      type: 'projectInterface/pageProjectInterface',
      payload: {
        currentPage,
        pageSize,
      },
    });
  }, []);

  // 初始化筛选
  useEffect(()=>{
	dispatch({
		type: 'projectBaseInfo/listLabelNode'
	})
  },[])

  const handleOnChange = (currentPage, pageSize) => {
    dispatch({
      type: 'projectInterface/pageProjectInterface',
      payload: {
        currentPage,
        pageSize,
      },
    });
  };

  const handleOnShowSizeChange = (current, pageSize) => {
    dispatch({
      type: 'projectInterface/pageProjectInterfaceSuccess',
      payload: {
        list: [],
      },
    });
  };

  const handleOnFinish = (values) => {
    dispatch({
      type: 'projectInterface/pageProjectInterface',
      payload: {
        ...values,
      },
    });
  };

  return (
    <PageContainer>
      <ProCard>
        <QueryFilter defaultCollapsed split onFinish={handleOnFinish}>
          <ProFormSelect name="projectBaseInfoId"
            label="项目名称"
            options={labelNodes}
			     showSearch
          />
          <ProFormText name="tagName" label="模块名称" />
          <ProFormText name="pathName" label="接口名称" />
        </QueryFilter>
        <Table
          columns={table}
          dataSource={list}
          rowKey={(row) => row.id}
          pagination={{
            total,
            showLessItems: true,
            showSizeChanger: true,
            showTotal: (total) => `共 ${total} 条`,
            pageSizeOptions: ['10', '20', '50', '100'],
            onChange: handleOnChange,
            onShowSizeChange: handleOnShowSizeChange,
          }}
        />
      </ProCard>
    </PageContainer>
  );
};

export default ProjectInterfacePage;
